<template>
    <section class="form_diy">
        <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="120px"
            v-if="content==='yuanData'"
            class="yuan_data_form"
        >
            <p class="title">基本信息：</p>
            <el-form-item label="字段名" prop="zdName">
                <el-input v-if="type==='add'" v-model="form.zdName"></el-input>
                <el-input v-if="type=='update'" v-model="detail.name"></el-input>
                <span v-if="type==='detail'">{{detail.name}}</span>
            </el-form-item>
            <el-form-item label="字段值" prop="zdval">
                <el-input v-if="type==='add'" v-model="form.zdval"></el-input>
                <el-input v-if="type==='update'" v-model="detail.key"></el-input>
                <span v-if="type==='detail'">{{detail.key}}</span>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-radio-group v-if="type==='add'" v-model="form.type">
                    <el-radio label="1">字符</el-radio>
                    <el-radio label="5">整数</el-radio>
                    <el-radio label="2">浮点数</el-radio>
                    <el-radio label="4">时间</el-radio>
                    <el-radio label="6">布尔</el-radio>
                    <el-radio label="3">大文本</el-radio>
                </el-radio-group>
                <el-radio-group v-if="type==='update'" v-model="detail.dataType" >
                    <el-radio label="1">字符</el-radio>
                    <el-radio label="5">整数</el-radio>
                    <el-radio label="2">浮点数</el-radio>
                    <el-radio label="4">时间</el-radio>
                    <el-radio label="6">布尔</el-radio>
                    <el-radio label="3">大文本</el-radio>
                </el-radio-group>
                <span v-if="type==='detail'">{{dataType[detail.dataType]}}</span>
            </el-form-item>
            <el-form-item label="适用类型" prop="shiyongType">
                <el-radio-group v-if="type==='add'" v-model="form.shiyongType">
                    <el-radio label="1">采集类</el-radio>
                    <el-radio label="2">共享类</el-radio>
                </el-radio-group>
                <el-radio-group v-if="type==='update'" v-model="detail.type">
                    <el-radio :label="1">采集类</el-radio>
                    <el-radio :label="2">共享类</el-radio>
                </el-radio-group>
                <span v-if="type==='detail'">{{shiyongType[detail.type]}}</span>
            </el-form-item>
            <!--***************************************-->
            <p style="border-bottom:1px dashed rgb(156, 156, 156);margin-bottom: 30px;"></p>
            <p class="title">校验规则：</p>
            <el-form-item label="长度不超过">
                <el-input
                    v-if="type==='add'"
                    v-model="form.maxWidth"
                    style="width: 90%;margin-right: 10px;"
                    type="number"
                >
                </el-input>
                <span v-if="type==='add'">位</span>
                <el-input
                    v-if="type==='update'"
                    v-model="detail.maxLen"
                    style="width: 90%;margin-right: 10px;"
                    type="number"
                >
                </el-input>
                <span v-if="type==='update'">位</span>
                <span v-if="type==='detail'">{{detail.maxLen}}</span>
            </el-form-item>
            <el-form-item label="长度不少于">
                <el-input
                    type="number"
                    v-if="type==='add'"
                    v-model="form.minWidth"
                    style="width: 90%;margin-right: 10px;"
                >
                </el-input>
                <span v-if="type==='add'">位</span>
                <el-input
                    type="number"
                    v-if="type==='update'"
                    v-model="detail.minLen"
                    style="width: 90%;margin-right: 10px;"
                >
                </el-input>
                <span v-if="type==='update'">位</span>
                <span v-if="type==='detail'">{{detail.minLen}}</span>
            </el-form-item>
            <el-form-item label="类型校验">
                <el-radio-group v-if="type==='add'" v-model="form.resource">
                    <el-radio label="1">身份证</el-radio>
                    <el-radio label="2">手机号码</el-radio>
                    <el-radio label="3">邮箱</el-radio>
                    <el-radio label="4">时间</el-radio>
                    <el-radio label="5">日期</el-radio>
                    <el-radio label="6">车牌号</el-radio>
                    <el-radio label="7">IP地址</el-radio>
                    <el-radio label="8">纯英文</el-radio>
                    <el-radio label="9">纯数字</el-radio>
                    <el-radio label="">不校验</el-radio>
                </el-radio-group>
                <el-radio-group v-if="type==='update'" v-model="detail.ruleIds">
                    <el-radio :label="'1'">身份证</el-radio>
                    <el-radio :label="'2'">手机号码</el-radio>
                    <el-radio :label="'3'">邮箱</el-radio>
                    <el-radio :label="'4'">时间</el-radio>
                    <el-radio :label="'5'">日期</el-radio>
                    <el-radio :label="'6'">车牌号</el-radio>
                    <el-radio :label="'7'">IP地址</el-radio>
                    <el-radio :label="'8'">纯英文</el-radio>
                    <el-radio :label="'9'">纯数字</el-radio>
                    <el-radio label="">不校验</el-radio>
                </el-radio-group>
                <span v-if="type==='detail'">{{TypeRuleds[detail.ruleIds]}}</span>
            </el-form-item>
            <el-form-item label="其他规则">
                <el-input v-if="type==='add'" type="textarea" v-model="form.desc"></el-input>
                <el-input v-if="type==='update'" type="textarea" v-model="detail.otherRule"></el-input>
                <span v-if="type==='detail'">{{detail.otherRule}}</span>
            </el-form-item>
            <el-form-item>
                <el-button v-if="type!='detail'" type="primary" @click="onSubmitYuanData('form')">确定</el-button>
                <el-button v-if="type!='detail'" @click="closeForm('form')">取消</el-button>
            </el-form-item>
        </el-form>
        <!--************************************************************************************************************************-->
        <el-form ref="form" :model="form" label-width="120px" v-if="content==='dataOrigin'">
            <el-form-item label="字段名">
                <el-input v-if="type==='add'" v-model="form.zdName"></el-input>
                <span v-if="type==='detail'">{{detail.name}}</span>
            </el-form-item>
            <el-form-item label="字段值">
                <el-input v-if="type==='add'" v-model="form.zdval"></el-input>
                <span v-if="type==='detail'">{{detail.key}}</span>
            </el-form-item>
            <el-form-item label="类型">
                <el-radio-group v-if="type==='add'" v-model="form.type">
                    <el-radio label="zifu">字符</el-radio>
                    <el-radio label="num">数值
                        <el-input v-model="form.nums" :maxlength="1" style="width: 40px;"></el-input>位
                    </el-radio>
                    <el-radio label="Base64">Base64</el-radio>
                </el-radio-group>
                <span v-if="type==='detail'">{{detail.type}}</span>
            </el-form-item>
            <el-form-item label="适用类型">
                <el-radio-group v-if="type==='add'" v-model="form.shiyongType">
                    <el-radio label="caiji">采集类</el-radio>
                    <el-radio label="fanhui">共享类</el-radio>
                </el-radio-group>
                <span v-if="type==='detail'">{{detail.shiyongType}}</span>
            </el-form-item>
            <!--***************************************-->
            <el-form-item label="长度不超过">
                <el-input v-if="type==='add'" v-model="form.maxWidth" style="width: 90%;margin-right: 10px;"></el-input>
                <span v-if="type==='add'">位</span>
                <span v-if="type==='detail'">{{detail.maxLen}}</span>
            </el-form-item>
            <el-form-item label="长度不少于">
                <el-input v-if="type==='add'" v-model="form.minWidth" style="width: 90%;margin-right: 10px;"></el-input>
                <span v-if="type==='add'">位</span>
                <span v-if="type==='detail'">{{detail.minLen}}</span>
            </el-form-item>
            <el-form-item label="通用校验">
                <el-checkbox-group v-if="type==='add'" v-model="form.jiance">
                    <el-checkbox label="SFZ" name="type">身份证</el-checkbox>
                    <el-checkbox label="phone" name="type">手机号码</el-checkbox>
                    <el-checkbox label="email" name="type">邮箱</el-checkbox>
                    <el-checkbox label="time" name="type">时间</el-checkbox>
                    <el-checkbox label="carCode" name="type">车牌号</el-checkbox>
                    <el-checkbox label="IP" name="type">IP地址</el-checkbox>
                </el-checkbox-group>
                <span v-if="type==='detail'">{{detail.jiance}}</span>
            </el-form-item>
            <el-form-item label="类型校验">
                <el-radio-group v-if="type==='add'" v-model="form.resource">
                    <el-radio label="eng">纯英文</el-radio>
                    <el-radio label="num">纯数字</el-radio>
                    <el-radio label="eng">身份证</el-radio>
                    <el-radio label="num">手机号码</el-radio>
                    <el-radio label="eng">邮箱</el-radio>
                    <el-radio label="num">时间</el-radio>
                    <el-radio label="eng">车牌号</el-radio>
                    <el-radio label="eng">IP地址</el-radio>
                </el-radio-group>
                <span v-if="type==='detail'">{{detail.resource}}</span>
            </el-form-item>
            <el-form-item label="其他规则">
                <el-input v-if="type==='add'" type="textarea" v-model="form.desc"></el-input>
                <span v-if="type==='detail'">{{detail.desc}}</span>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">确定</el-button>
                <el-button @click="closeForm">取消</el-button>
            </el-form-item>
        </el-form>
    </section>
</template>

<script>
    export default {
        props: {
            type: "",
            content: "",
            detail: {
              type: Object
            },
            resetFields: '',
        },
        data() {
            return {
                form: {
                    zdName: "",
                    zdval: "",
                    type: "",
                    shiyongType: "",
                    maxWidth: "",
                    minWidth: "",
                    resource: "",
                    desc: ""
                },
                rules: {
                    zdName: [{ required: true, message: "请输入字段名", trigger: "blur" }],
                    zdval: [{ required: true, message: "请输入字段值", trigger: "blur" }],
                    type: [{ required: true, message: "请选择类型", trigger: "change" }],
                    shiyongType: [{ required: true, message: "请选择适用类型", trigger: "change" }]
                },
                dataType: ["", "字符", "数值", "base64"],
                shiyongType: ["", "采集类", "共享类"],
                TypeRuleds: [
                    "",
                    "身份证",
                    "手机号码",
                    "邮箱",
                    "时间",
                    "日期",
                    "车牌号",
                    "IP地址",
                    "纯英文",
                    "纯数字"
                ],
                form2: {},
                detail2: {},
                test: 2
            };
        },
        methods: {
            onSubmitYuanData(formName) {
                if (this.type === "add") {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.$message({
                                showClose: true,
                                message: '添加成功',
                                type: 'success'
                            });
                            this.$emit("insertData", this.form);
                            //清空上条数据
                            this.form = {};
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                } else if (this.type === "update") {
                    this.$emit("insertData", this.detail);
                }
            },
            closeForm(formName){
                this.$emit('closeForm');
                this.form = {};
                // this.$refs[formName].resetFields();
                this.$refs.form.resetFields();
            }
        },
        watch: {
            resetFields: function(val){
                console.log("resetFieldsChange")
                this.$refs.form.resetFields();
            }
        }
    };
</script>

<style scoped="scoped">
    .title {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .yuan_data_form .el-radio {
        margin-left: unset;
        margin-right: 30px;
        margin-bottom: 10px;
    }
</style>